<!doctype html>



  


<html class="theme-next mist use-motion">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="baidu-site-verification" content="zD47G9xe42" />


<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />












  
  
  <link href="/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/vendors/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.0.1" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="uiste个人博客网站,uiste,uiste博客,PHP,运维,Hexo,技术博客" />





  <link rel="alternate" href="/atom.xml" title="uiste" type="application/atom+xml" />




  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.0.1" />






<meta name="description" content="Stay Hungry，Stay Foolish">
<meta property="og:type" content="website">
<meta property="og:title" content="uiste">
<meta property="og:url" content="http://blog.uiste.com/page/11/index.html">
<meta property="og:site_name" content="uiste">
<meta property="og:description" content="Stay Hungry，Stay Foolish">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="uiste">
<meta name="twitter:description" content="Stay Hungry，Stay Foolish">



<script type="text/javascript" id="hexo.configuration">
  var NexT = window.NexT || {};
  var CONFIG = {
    scheme: 'Mist',
    sidebar: {"position":"left","display":"post"},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: 0,
      author: '博主'
    }
  };
</script>




  <link rel="canonical" href="http://blog.uiste.com/page/11/"/>

  <title>
 
  uiste - Stay Hungry，Stay Foolish 

</title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  



  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?b58b87af012832b8ae35e33bb45b44fa";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>








  
  
    
  

  <div class="container one-collumn sidebar-position-left 
   page-home 
 ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-meta ">
  

  <div class="custom-logo-site-title">
    <a href="/"  class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <span class="site-title">uiste</span>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>
  <p class="site-subtitle">uiste个人博客</p>
</div>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br />
            
            搜索
          </a>
        </li>
      

            <li class="menu-item menu-item-search"> <a title="把这个链接拖到你的Chrome收藏夹工具栏中" href='javascript:(function() {
    function c() {
        var e = document.createElement("link");
        e.setAttribute("type", "text/css");
        e.setAttribute("rel", "stylesheet");
        e.setAttribute("href", f);
        e.setAttribute("class", l);
        document.body.appendChild(e)
    }
 
    function h() {
        var e = document.getElementsByClassName(l);
        for (var t = 0; t < e.length; t++) {
            document.body.removeChild(e[t])
        }
    }
 
    function p() {
        var e = document.createElement("div");
        e.setAttribute("class", a);
        document.body.appendChild(e);
        setTimeout(function() {
            document.body.removeChild(e)
        }, 100)
    }
 
    function d(e) {
        return {
            height : e.offsetHeight,
            width : e.offsetWidth
        }
    }
 
    function v(i) {
        var s = d(i);
        return s.height > e && s.height < n && s.width > t && s.width < r
    }
 
    function m(e) {
        var t = e;
        var n = 0;
        while (!!t) {
            n += t.offsetTop;
            t = t.offsetParent
        }
        return n
    }
 
    function g() {
        var e = document.documentElement;
        if (!!window.innerWidth) {
            return window.innerHeight
        } else if (e && !isNaN(e.clientHeight)) {
            return e.clientHeight
        }
        return 0
    }
 
    function y() {
        if (window.pageYOffset) {
            return window.pageYOffset
        }
        return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
    }
 
    function E(e) {
        var t = m(e);
        return t >= w && t <= b + w
    }
 
    function S() {
        var e = document.createElement("audio");
        e.setAttribute("class", l);
        e.src = i;
        e.loop = false;
        e.addEventListener("canplay", function() {
            setTimeout(function() {
                x(k)
            }, 500);
            setTimeout(function() {
                N();
                p();
                for (var e = 0; e < O.length; e++) {
                    T(O[e])
                }
            }, 15500)
        }, true);
        e.addEventListener("ended", function() {
            N();
            h()
        }, true);
        e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
        document.body.appendChild(e);
        e.play()
    }
 
    function x(e) {
        e.className += " " + s + " " + o
    }
 
    function T(e) {
        e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
    }
 
    function N() {
        var e = document.getElementsByClassName(s);
        var t = new RegExp("\\b" + s + "\\b");
        for (var n = 0; n < e.length; ) {
            e[n].className = e[n].className.replace(t, "")
        }
    }
 
    var e = 30;
    var t = 30;
    var n = 350;
    var r = 350;
    var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
    var s = "mw-harlem_shake_me";
    var o = "im_first";
    var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
    var a = "mw-strobe_light";
    var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
    var l = "mw_added_css";
    var b = g();
    var w = y();
    var C = document.getElementsByTagName("*");
    var k = null;
    for (var L = 0; L < C.length; L++) {
        var A = C[L];
        if (v(A)) {
            if (E(A)) {
                k = A;
                break
            }
        }
    }
    if (A === null) {
        console.warn("Could not find a node of the right size. Please try a different page.");
        return
    }
    c();
    S();
    var O = [];
    for (var L = 0; L < C.length; L++) {
        var A = C[L];
        if (v(A)) {
            O.push(A)
        }
    }
})()    '>High</a> </li>

    </ul>
  

 
    <div class="site-search">
      
  <div class="popup">
 <span class="search-icon fa fa-search"></span>
 <input type="text" id="local-search-input">
 <div id="local-search-result"></div>
 <span class="popup-btn-close">close</span>
</div>


    </div>
   
</nav>

 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            
  <section id="posts" class="posts-expand">
    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/20160820-1.html" itemprop="url">
                  Day1-多站点配置
                </a>
              
            
          </h1>
        

        <div class="post-meta">
        
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time itemprop="dateCreated" datetime="2016-08-20T15:14:56+08:00" content="2016-08-20">
              2016-08-20
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/PHP/" itemprop="url" rel="index">
                    <span itemprop="name">PHP</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/20160820-1.html#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="20160820-1.html" itemprop="commentsCount"></span>
                </a>
              </span>
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <blockquote>
<p>wamp<br>windows<br>a:apache<br>m:mysql<br>p:php</p>
</blockquote>
<h3 id="apache的安装"><a href="#apache的安装" class="headerlink" title="apache的安装"></a>apache的安装</h3><p>安装好了以后右下方会有一个小羽毛按钮。</p>
<p>测试，浏览器的地址栏上输入<code>127.0.0.1</code></p>
<p><strong>apache四种开启方式</strong></p>
<ul>
<li>左击小羽毛或者双击小羽毛<br>右击我的电脑，选择管理，再选择服务<br>cmd命令行的模式<br><code>httpd -k start</code></li>
</ul>
<blockquote>
<p>环境变量的设置，右击我的电脑，属性，高级系统设置，环境变量，选择path进行编辑。<br>httpd -t 检查apache是否可以正常运行</p>
</blockquote>
<p><strong>apache几个比较重要的文件夹</strong></p>
<ul>
<li>bin:里面都是一些apache可执行文件httpd.exe，apacheMonitor.exe<br>htdocs:默认站点，一般刚安装完apache以后，运行网页会放在htdocs中<br>conf:里面都是apache一些可以配置的文件<br>module：里面是apache的一些模块，加载的模块的功能就是apache的功能。</li>
</ul>
<h3 id="php的安装"><a href="#php的安装" class="headerlink" title="php的安装"></a>php的安装</h3><p>解压安装包就可以运行了。<br>打开cmd，输入php.exe -v 可以查看php的版本号<br>目前apache和php是两个独立的存在。<br>打开apache的配置文件。<br>所有加载模块都是 LoadModule 模块名 “路径”<br>加载完了以后，apache不知道后缀名是.php的文件交给php脚本处理器。</p>
<p>加载PHP模块<br><code>LoadModule php5_module &quot;C:/wamp/php/php5apache2_2.dll&quot;</code></p>
<p>引入php.ini配置文件<br><code>PHPIniDir &quot;C:/wamp/php&quot;</code></p>
<p><code>addtype application/x-httpd-php  .php</code><br>重启apache</p>
<p>代码中输入<code>phpinfo（）</code>可以查看php的所有信息。</p>
<p>方法一：<code>c:/windows，php.ini</code>复制到<code>c:/windows</code><br>方法二：打开apache的配置文件，输入PHPIniDir “路径”</p>
<p>Php的配置文件有两个，<code>php.ini-development</code>  <code>php.ini-product</code><br>一定要重命名php.ini</p>
<p>要给php设置时区。<br>打开php.ini 搜索<code>date.timezone = PRC</code></p>
<h3 id="安装mysql"><a href="#安装mysql" class="headerlink" title="安装mysql"></a>安装mysql</h3><p>mysql 是一个c/s结构，同时安装了客户端和服务器端。<br>配置mysql的配置文件，打开配置向导<br>配置完安装，有四个勾<br>打开cmd 输入<code>mysql.exe -uroot -proot</code><br>如果出现welcome界面代表大家安装成功</p>
<p><code>mysql_connect();</code><br>关联mysql和php<br>打开php的配置文件<br>extension，将php_mysql.dll的注释去掉<br><code>extension_dir=”路径”</code></p>
<p>打开apache的配置文件httpd.conf<br>站点：<code>documentRoot</code><br>允许加载：<code>allow from all</code><br>关于允许拒绝的顺序 <code>order</code><br>设置目录：<code>options indexes</code><br>设置首页: <code>directoryIndex 首页名称</code></p>
<p>配置虚拟主机<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">&lt;virtualHost *:80&gt;</div><div class="line">documentRoot 设置站点</div><div class="line">serverName 设置域名</div><div class="line">directoryIndex 站点</div><div class="line">&lt;directory “站点”&gt;</div><div class="line"></div><div class="line">&lt; /directory&gt;</div><div class="line">&lt;/virtualHost&gt;</div></pre></td></tr></table></figure></p>
<p>分布式部署</p>
<p><code>allowoverride all</code><br>分布式部署的文件夹 .htaccess<br>不能直接创建，需要通过编辑器去创建。</p>
<h1 id="虚拟站点配置"><a href="#虚拟站点配置" class="headerlink" title="虚拟站点配置"></a>虚拟站点配置</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line">&lt;VirtualHost *:80&gt;</div><div class="line">	# 配置管理员的邮箱，当服务器产生500错误（服务器内部错误）的时候会在错误页面上展示该邮箱</div><div class="line">	ServerAdmin hi@uiste.com</div><div class="line">	# 站点根目录</div><div class="line">	DocumentRoot &quot;E:\webdocs\sh06&quot;</div><div class="line">	# 站点所绑定的域名</div><div class="line">	ServerName www.uiste.com</div><div class="line">	# 站点配置别名（域名绑定的另一种形式）</div><div class="line">	ServerName uiste.com</div><div class="line">	# 错误日志，logs目录是指Apache目录下</div><div class="line">	ErrorLog &quot;logs/sh/error.log&quot;</div><div class="line">	# 正常访问日志，logs也是在Apache目录下，common是指日志记录规则</div><div class="line">	CustomLog &quot;logs/sh/access.log&quot; common</div><div class="line">	# 针对站点目录的详细配置</div><div class="line">	&lt;Directory &quot;E:\webdocs\sh06&quot;&gt;</div><div class="line">		allow from all</div><div class="line">		AllowOverride all</div><div class="line">		Options +indexes</div><div class="line">	&lt;/Directory&gt;</div><div class="line">&lt;/VirtualHost&gt;</div></pre></td></tr></table></figure>
<p><code>cmd to hosts</code><br><code>127.0.0.1 www.sh06.com sh06.com</code></p>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/20160818-1.html" itemprop="url">
                  js思想养成-光标定位
                </a>
              
            
          </h1>
        

        <div class="post-meta">
        
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time itemprop="dateCreated" datetime="2016-08-18T15:36:20+08:00" content="2016-08-18">
              2016-08-18
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/javascript/" itemprop="url" rel="index">
                    <span itemprop="name">javascript</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/20160818-1.html#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="20160818-1.html" itemprop="commentsCount"></span>
                </a>
              </span>
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h3 id="当鼠标划过文本框-自动选中文本框中的内容"><a href="#当鼠标划过文本框-自动选中文本框中的内容" class="headerlink" title="当鼠标划过文本框,自动选中文本框中的内容"></a>当鼠标划过文本框,自动选中文本框中的内容</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line">&lt;body&gt;</div><div class="line">	&lt;form action="a.php" method="post" name="login" id="form1" onsubmit="return checkName()"&gt;</div><div class="line">	用户名：&lt;input type="text" name="username" id="username"/&gt;&lt;br/&gt;</div><div class="line">	&lt;input type="submit" id="btn" value="提交"&gt;</div><div class="line">	&lt;/form&gt;</div><div class="line">	&lt;script type="text/javascript"&gt;</div><div class="line">	// 当鼠标划过文本 框,自动选中文本框中的内容</div><div class="line">	var obj = document.getElementById("username");</div><div class="line">	obj.onmouseover = function()&#123;</div><div class="line">		this.select();</div><div class="line">	&#125;</div><div class="line">	// 表单验证不为空</div><div class="line">	function checkName()&#123;</div><div class="line">		if (obj.value != "") &#123;</div><div class="line">			return true;</div><div class="line">		&#125;else&#123;</div><div class="line">			return false;</div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">	&lt;/script&gt;</div><div class="line">&lt;/body&gt;</div></pre></td></tr></table></figure>
<h3 id="网页自动跳转so-easy"><a href="#网页自动跳转so-easy" class="headerlink" title="网页自动跳转so easy!!!"></a>网页自动跳转so easy!!!</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">function gonewpage()&#123;</div><div class="line">	window.location.href = &quot;./new.html&quot;;</div><div class="line">&#125;</div><div class="line">setTimeout(&quot;gonewpage()&quot;,2000);</div></pre></td></tr></table></figure>
<h3 id="在弹出窗页面输入信息，返回到原始页面中"><a href="#在弹出窗页面输入信息，返回到原始页面中" class="headerlink" title="在弹出窗页面输入信息，返回到原始页面中"></a>在弹出窗页面输入信息，返回到原始页面中</h3><blockquote>
<p>一个网页,使得打开它时弹出一个全屏的窗口,该窗口中有一个文本框和一个按钮。<br><strong>主窗口</strong></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"zh-cn"</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">title</span>&gt;</span>主窗口<span class="tag">&lt;/<span class="name">title</span>&gt;</span>	</div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">	<span class="comment">&lt;!-- 通过弹出窗口接受信息 --&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">""</span> <span class="attr">id</span>=<span class="string">"a1"</span> <span class="attr">target</span>=<span class="string">"new"</span>&gt;</span>新窗口<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">id</span>=<span class="string">"msg"</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="javascript"></span></div><div class="line">	<span class="keyword">var</span> a1 = <span class="built_in">document</span>.getElementById(<span class="string">"a1"</span>);</div><div class="line">	a1.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		<span class="built_in">window</span>.open(<span class="string">"new.html"</span>,<span class="string">"弹出窗口"</span>,<span class="string">"location=no,toolbar=no,menubar=no"</span>);</div><div class="line">		<span class="keyword">return</span> <span class="literal">false</span>;</div><div class="line">	&#125;</div><div class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<p><strong>弹出窗口</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">title</span>&gt;</span>弹出窗口<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">		<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"message"</span> <span class="attr">id</span>=<span class="string">"m1"</span>/&gt;</span><span class="tag">&lt;<span class="name">br</span>/&gt;</span></div><div class="line">		<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"关闭"</span> <span class="attr">id</span>=<span class="string">"btn"</span> <span class="attr">onclick</span>=<span class="string">"btn3()"</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="javascript"></span></div><div class="line">	<span class="keyword">var</span> message = <span class="built_in">document</span>.getElementById(<span class="string">"m1"</span>);</div><div class="line">	<span class="keyword">var</span> btn2 = <span class="built_in">document</span>.getElementById(<span class="string">"btn2"</span>);</div><div class="line">	<span class="function"><span class="keyword">function</span> <span class="title">btn3</span>(<span class="params"></span>)</span>&#123;</div><div class="line">		<span class="keyword">var</span> form1 = <span class="built_in">window</span>.opener.document.getElementById(<span class="string">"msg"</span>);</div><div class="line">		form1.value = message.value;</div><div class="line">		<span class="built_in">window</span>.close();</div><div class="line">	&#125;</div><div class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/20160817-2.html" itemprop="url">
                  js基础知识点
                </a>
              
            
          </h1>
        

        <div class="post-meta">
        
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time itemprop="dateCreated" datetime="2016-08-17T17:44:45+08:00" content="2016-08-17">
              2016-08-17
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/javascript/" itemprop="url" rel="index">
                    <span itemprop="name">javascript</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/20160817-2.html#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="20160817-2.html" itemprop="commentsCount"></span>
                </a>
              </span>
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h3 id="优先级"><a href="#优先级" class="headerlink" title="优先级"></a>优先级</h3><p>运算符优先级：<br>括号优先<br>逻辑与比逻辑或优先<br>赋值运算符最后</p>
<p>typeof(变量名) 输出变量数据类型</p>
<p>firebug 调试js代码，函数执行完成后会继续返回到调研的位置</p>
<p>在函数内部定义的变量为局部变量，局部变量取消前面的var 就默认为全局变量，全局变量在函数外部使用时，需要先调用函数；</p>
<p>函数可以先定义后调用，同时也可以先调用后定义；</p>
<p>arr.length  计算数组长度</p>
<p>isNaN(24)  判断是否不是一个数字,若为”23b”，则不是一个数字，返回ture</p>
<h3 id="数组对象"><a href="#数组对象" class="headerlink" title="数组对象"></a>数组对象</h3><p>var arrr = [23,24,25];<br>arr.concat(arr1,arr2) 使用concat连接数组或者在arr数组后面增加元素,组成的是新的数组</p>
<p>arr.join(“-“) 使用“-”连接数组的每一项 返回的结果是 23-24-25;如果以空字符串连接，返回的是字符串<br>pop(),删除数组的最后一项，并且返回被删除的元素；<br>push(),加入新的内容，并返回新的长度；<br>reverse():翻转数组的顺序；</p>
<h3 id="字符串对象"><a href="#字符串对象" class="headerlink" title="字符串对象"></a>字符串对象</h3><p>charAt(3) ,获取指定字符串下标的元素<br>charCodeAt(3),获取指定字符串下标元素的ASCCI值<br>indexOf(“d”),获取字符d在字符串中第一次出现的位置，若无法查找返回-1；<br>lastIndexOf(“d”),获取字符d在字符串中最后一次出现的位置，若无法查找返回-1；<br>split(“n”),将字符串以字符n进行分割，返回一个数组；<br>substr(n,m),截取字符串从n开始的m个元素，如果只有一个参数就截取到最后<br>substring(n,m),截取从下标为n的位置到m的位置；左开右闭区间；如果只有一个参数就截取到最后<br>toLowerCase():将字符串字母转换成小写形式返回，原有字符串大小写不变<br>toUpperCase():将字符串字母转换成大写形式返回，原有字符串大小写不变</p>
<blockquote>
<p>判断上传文件的思路：通过使用lastIndexOf(“.”)判断“.”最后出现的文字，再通过substr(n+1,4)截取文件格式后缀进行判断；为避免大小写问题可以通过toLowerCase()统一转换成小写进行判断</p>
</blockquote>
<h3 id="Math对象"><a href="#Math对象" class="headerlink" title="Math对象"></a>Math对象</h3><p>Math.pow(n,m):求n的m次方<br>Math.abs(n)：求n的绝对值<br>Math.round(n):求n的四舍五入值<br>Math.floor(n):求n的向下取整的值<br>Math.ceil(n):求n的向上取整的值<br>Math.random():求0-1的随机整数 ，左开右闭区间求10-20的整数Math.floor(Math.random()*10+10);<br>使用floor比用round公平，出现0的概率与出现1的概率相同；</p>
<h3 id="DaTe对象"><a href="#DaTe对象" class="headerlink" title="DaTe对象"></a>DaTe对象</h3><p>四种创建方式：<br>var n1 = new Date();<br>var n2 = new Date(“1991/11/5”);<br>var n3 = new Date(1991,11,5);显示12月<br>var n4 = new Date(233428408324);<br>toLocaleString():该方法以本地格式显示</p>
<p>getFullYear();获取年份<br>getMonth();获取月份<br>getDate();获取日期<br>getHours();获取小时<br>getMinutes();获取分钟<br>getSeconds();获取秒<br>getMilliSeconds();获取毫秒<br>getDay();获取星期<br>getTime();获取从1970到时间点的毫秒</p>
<h3 id="样式对象"><a href="#样式对象" class="headerlink" title="样式对象"></a>样式对象</h3><p>obj.style.background = “res”; 背景颜色变为红色<br>obj.style.fontSize = “60px”; 更改字体大小<br>innerHtml获取文档内容（带html标签）<br>innerText获取文本内容（去除HTML标签）</p>
<h3 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h3><p>onfous:获得焦点<br>onblur:失去焦点<br>onsubmit：提交事件<br>onchange:当发生改变的时候<br>onreset：重置事件<br>onload 当页面加载完成立刻执行的事件<br>两种方式：</p>
<p><script> window.onload=init;</script></p>
<body onload="init()"></body>

<h3 id="Event事件信息对象"><a href="#Event事件信息对象" class="headerlink" title="Event事件信息对象"></a>Event事件信息对象</h3><p>Event:保存事件发生时的相关信息<br>Event.clientX:事件发生时的X的坐标（鼠标事件的对象）<br>var obj = Event.target:事件发生源（返回触发此事件的元素）<br>Event：必须通过参数形式传递给函数才可以使用</p>
<h3 id="cursor-光标"><a href="#cursor-光标" class="headerlink" title="cursor 光标"></a>cursor 光标</h3><p>cursor：crosshair;<br>cursor: help;<br>cursor：wait;</p>
<h3 id="错误调试"><a href="#错误调试" class="headerlink" title="错误调试"></a>错误调试</h3><p>try{运行错误代码}<br>catch(err){alert(err.message);}</p>
<h3 id="创建标签对象"><a href="#创建标签对象" class="headerlink" title="创建标签对象"></a>创建标签对象</h3><p>var obj = document.createElement(“标签名”) 通过createElement创建标签对象<br>document.body.appendChild(obj); 将标签对象增加到obj中</p>
<p>注意：body中由于margin边距原因可能导致事件不会被触发（小星星案例）</p>
<h3 id="按钮开关的切换方式"><a href="#按钮开关的切换方式" class="headerlink" title="按钮开关的切换方式"></a>按钮开关的切换方式</h3><p>方法一：通过if语句进行判断value值<br>方法二：通过记录点击的次数，默认开，如果是偶数就返回开，如果是奇数就返回关。注意定义记次变量需作为全局变量<br>方法三：定义一个flag 变量记录bool值，开为ture，关为false<br>方法四：通过this传递当前对象，判断当前对象的value值<br>this代表当前obj</p>
<h3 id="window对象"><a href="#window对象" class="headerlink" title="window对象"></a>window对象</h3><p>var n = prompt(“提示信息”,”默认值”);   //pppp就是可以输入信息的<br>confirm()选择确定和取消<br>open(“www.uiste.com”,”uiste博客”,”width=300,height=300,top=20,left=20”) 打开一个新的窗口</p>
<h3 id="定时器"><a href="#定时器" class="headerlink" title="定时器"></a>定时器</h3><p>一次性定时器：var time1 = windows.setTimeout(“js代码”,时间);<br>反复性定时器：var time2= window.setInterval(“js代码”,时间);<br>清楚定时器：window.clearTimeout(time1);</p>
<h3 id="图片轮播的思想"><a href="#图片轮播的思想" class="headerlink" title="图片轮播的思想"></a>图片轮播的思想</h3><blockquote>
<p>声明全局变量：背景图变换的序号i,用于清楚定时器的time；<br>第一步：初始化函数中加入一个交换背景图片的反复性定时器用于加载交换函数<br>第二步：图片自动播放联动按钮变化：在交换函数中通过for循环改变i的值，再通过元素样式对象属性进行切换图片；通过第二个循环，与第一循环的i值关联，用于联动按钮的背景样式<br>第三步：写一个stop函数当鼠标放置在img上清楚定时器，start函数鼠标离开时重新启动定时器(<strong>注意设置定时器名字</strong>)<br><code>（dsq=window.setInterval(&quot;change()&quot;,1000);）</code>重写一遍定时器<br>第五步：按钮点击联动图片自动切换：通过使用函数值传递，进行判断切换stopImg函数(<strong>注意i=n来控制图片切换避免鼠标离开时乱启动图片</strong>)<br><code>&lt;li id=&quot;d1&quot; onmousemove=&quot;stopImg(1,this)&quot; onmouseout=&quot;startImg(this)&quot;&gt;1&lt;/li&gt;</code></p>
</blockquote>
<h3 id="找对象的方法"><a href="#找对象的方法" class="headerlink" title="找对象的方法"></a>找对象的方法</h3><p>id:document.getElementById(“id名”)；<br>标签名：document.getElementsByTagName(“标签名”);//多个标签以数组形式保存<br>name:document.getElementsByName(“name名”);//数组<br>className:document.getElementsByClassName(“class名”);//数组<br>img:document.images;//数组<br>link对象：document.links;//获取连接对象，数组<br>表单对象：document.form;<br>body标签对象：document.body;<br>html标签对象：document.docuementElement;<br>事件信息对象：event;<br>当前对象：this;</p>
<h3 id="location对象"><a href="#location对象" class="headerlink" title="location对象"></a>location对象</h3><p>location.属性 返回当前页面的URL相关信息<br>location.方法()<br>assign加载新文档【跳转】<br>reload重新加载当前文档【刷新】<br>replace 用新文档替换当前文档【不会再history中生成新的记录】</p>
<h3 id="history-对象"><a href="#history-对象" class="headerlink" title="history 对象"></a>history 对象</h3><p>包含用户访问过的URL<br>属性：<br>length：返回历史记录中的URL数量<br>方法：<br>back():加载前一个页面<br>forward()：加载后一个页面<br>go(-3)：跳转到指定页面，后退几个页面就写数字几</p>
<h3 id="screen对象"><a href="#screen对象" class="headerlink" title="screen对象"></a>screen对象</h3><p>screen.height:获取屏幕的高度<br>screen.width:获取屏幕的宽度</p>
<h3 id="navigation对象"><a href="#navigation对象" class="headerlink" title="navigation对象"></a>navigation对象</h3><p>包含有关浏览器的相关信息<br>appName : 返回浏览器名称<br>appCodeName：返回浏览器代码名<br>appVersion:浏览器版本号和平台信息<br>userAgent:浏览器信息<br>浏览器判断<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">var obj = navigator.userAgent;</div><div class="line">if(obj.indexOf(&quot;Firefox&quot;!=-1))&#123;</div><div class="line">	alert(&quot;火狐浏览器&quot;);</div><div class="line">&#125;else if (obj.indexOf(&quot;Chrome&quot;!=-1))&#123;</div><div class="line">	alert(&quot;谷歌浏览器&quot;);</div><div class="line">&#125;else&#123;</div><div class="line">	alert(&quot;其它浏览器&quot;);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/20160817-1.html" itemprop="url">
                  图片轮播
                </a>
              
            
          </h1>
        

        <div class="post-meta">
        
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time itemprop="dateCreated" datetime="2016-08-17T16:31:54+08:00" content="2016-08-17">
              2016-08-17
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/JavaScript/" itemprop="url" rel="index">
                    <span itemprop="name">JavaScript</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/20160817-1.html#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="20160817-1.html" itemprop="commentsCount"></span>
                </a>
              </span>
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h3 id="实现思路"><a href="#实现思路" class="headerlink" title="实现思路"></a>实现思路</h3><p><strong>一步一步来</strong></p>
<ul>
<li>图片切换</li>
<li>鼠标悬停</li>
<li>按钮跟踪</li>
<li>………………<h3 id="源代码"><a href="#源代码" class="headerlink" title="源代码"></a>源代码</h3><figure class="highlight html"><figcaption><span>css javascript</span></figcaption><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"zh-cn"</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">title</span>&gt;</span>轮播图片<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span><span class="undefined"></span></div><div class="line">	*&#123;</div><div class="line">		margin: 0;</div><div class="line">		padding: 0;</div><div class="line">	&#125;</div><div class="line">	div &#123;</div><div class="line">		margin:50px;</div><div class="line">		width: 470px;</div><div class="line">	&#125;</div><div class="line">	div ul&#123;</div><div class="line">		float: right;</div><div class="line">		margin-top:45px;</div><div class="line">	&#125;</div><div class="line">	div ul li&#123;</div><div class="line">		list-style:none;</div><div class="line">		width:30px;</div><div class="line">		height: 20px;</div><div class="line">		line-height: 20px;</div><div class="line">		text-align: center;</div><div class="line">		border: 1px solid orange;</div><div class="line">		margin-top:5px;</div><div class="line">	&#125;</div><div class="line">	<span class="tag">&lt;/<span class="name">style</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></div><div class="line">		window.onload = init;		</div><div class="line">		var i =1;</div><div class="line">		var time;</div><div class="line">		function init()&#123;</div><div class="line">			var obj = document.getElementById("d1");</div><div class="line">			//解决第一背景颜色不变的情况</div><div class="line">			obj.style.background = "orange";</div><div class="line">			time = window.setInterval('change()',1000);</div><div class="line">		&#125;</div><div class="line">		function change()&#123;</div><div class="line">			i++;</div><div class="line">			if (i&gt;5) &#123;</div><div class="line">				i=1;</div><div class="line">			&#125;</div><div class="line">			var obj = document.getElementById('img');</div><div class="line">			obj.src = "images/beijing_" + i + ".jpg";</div><div class="line">			var obj2 = document.getElementById("d"+i);</div><div class="line">			obj2.style.background = "orange";</div><div class="line">			for (var j=1 ; j&lt;6; j++)&#123;</div><div class="line">				if(j!=i)&#123;</div><div class="line">				var obj3 = document.getElementById("d"+j);</div><div class="line">				obj3.style.background = "white";</div><div class="line">				&#125;</div><div class="line">			&#125;</div><div class="line">		&#125;</div><div class="line">		function stop()&#123;</div><div class="line">			window.clearInterval(time);</div><div class="line">		&#125;</div><div class="line">		function start()&#123;</div><div class="line">			time = window.setInterval('change()',1000);</div><div class="line">		&#125;</div><div class="line">		function stopImg(n,m)&#123;</div><div class="line">			i = n;</div><div class="line">			var obj = document.getElementById('img');</div><div class="line">			obj.src = "images/beijing_" + i + ".jpg";</div><div class="line">			window.clearInterval(time);</div><div class="line">			m.style.background="orange";</div><div class="line">			for (var j=1 ; j&lt;6; j++)&#123;</div><div class="line">				if(j!=i)&#123;</div><div class="line">				var obj3 = document.getElementById("d"+j);</div><div class="line">				obj3.style.background = "white";</div><div class="line">				&#125;</div><div class="line">			&#125;</div><div class="line">		&#125;</div><div class="line">		function startImg(m)&#123;</div><div class="line">			time = window.setInterval('change()',1000);</div><div class="line">		&#125;</div><div class="line">	<span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">	<span class="tag">&lt;<span class="name">div</span>&gt;</span></div><div class="line">		<span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/beijing_1.jpg"</span> <span class="attr">width</span>=<span class="string">"400"</span> <span class="attr">id</span>=<span class="string">"img"</span> <span class="attr">onmousemove</span>=<span class="string">"stop()"</span> <span class="attr">onmouseout</span>=<span class="string">"start()"</span> <span class="attr">title</span>=<span class="string">"背景图1"</span> <span class="attr">alt</span>=<span class="string">"背景图1"</span>&gt;</span></div><div class="line">		<span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line">			<span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">"d1"</span> <span class="attr">onmousemove</span>=<span class="string">"stopImg(1,this)"</span> <span class="attr">onmouseout</span>=<span class="string">"startImg(this)"</span>&gt;</span>1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">			<span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">"d2"</span> <span class="attr">onmousemove</span>=<span class="string">"stopImg(2,this)"</span> <span class="attr">onmouseout</span>=<span class="string">"startImg(this)"</span>&gt;</span>2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">			<span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">"d3"</span> <span class="attr">onmousemove</span>=<span class="string">"stopImg(3,this)"</span> <span class="attr">onmouseout</span>=<span class="string">"startImg(this)"</span>&gt;</span>3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">			<span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">"d4"</span> <span class="attr">onmousemove</span>=<span class="string">"stopImg(4,this)"</span> <span class="attr">onmouseout</span>=<span class="string">"startImg(this)"</span>&gt;</span>4<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">			<span class="tag">&lt;<span class="name">li</span> <span class="attr">id</span>=<span class="string">"d5"</span> <span class="attr">onmousemove</span>=<span class="string">"stopImg(5,this)"</span> <span class="attr">onmouseout</span>=<span class="string">"startImg(this)"</span>&gt;</span>5<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">		<span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line">	<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="代码分析"><a href="#代码分析" class="headerlink" title="代码分析"></a>代码分析</h3><blockquote>
<p>声明全局变量：背景图变换的序号i,用于清楚定时器的time；<br>第一步：初始化函数中加入一个交换背景图片的反复性定时器用于加载交换函数<br>第二步：图片自动播放联动按钮变化：在交换函数中通过for循环改变i的值，再通过元素样式对象属性进行切换图片；通过第二个循环，与第一循环的i值关联，用于联动按钮的背景样式<br>第三步：写一个stop函数当鼠标放置在img上清楚定时器，start函数鼠标离开时重新启动定时器(<strong>注意设置定时器名字</strong>)<br><code>（dsq=window.setInterval(&quot;change()&quot;,1000);）</code>重写一遍定时器<br>第五步：按钮点击联动图片自动切换：通过使用函数值传递，进行判断切换stopImg函数(<strong>注意i=n来控制图片切换避免鼠标离开时乱启动图片</strong>)<br><code>&lt;li id=&quot;d1&quot; onmousemove=&quot;stopImg(1,this)&quot; onmouseout=&quot;startImg(this)&quot;&gt;1&lt;/li&gt;</code></p>
</blockquote>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  
  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/20160815-1.html" itemprop="url">
                  PHP弱类型安全问题总结
                </a>
              
            
          </h1>
        

        <div class="post-meta">
        
          <span class="post-time">
            <span class="post-meta-item-icon">
              <i class="fa fa-calendar-o"></i>
            </span>
            <span class="post-meta-item-text">发表于</span>
            <time itemprop="dateCreated" datetime="2016-08-15T19:21:38+08:00" content="2016-08-15">
              2016-08-15
            </time>
          </span>

          
            <span class="post-category" >
              &nbsp; | &nbsp;
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
              
                <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                  <a href="/categories/PHP/" itemprop="url" rel="index">
                    <span itemprop="name">PHP</span>
                  </a>
                </span>

                
                

              
            </span>
          

          
            
              <span class="post-comments-count">
                &nbsp; | &nbsp;
                <a href="/20160815-1.html#comments" itemprop="discussionUrl">
                  <span class="post-comments-count ds-thread-count" data-thread-key="20160815-1.html" itemprop="commentsCount"></span>
                </a>
              </span>
            
          

          

          
          

          
        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <blockquote>
<p>PHP特性就是弱类型，以及内置函数对于传入参数的松散处理<br>本篇文章主要就是记录PHP的弱类型所带来的问题。</p>
</blockquote>
<h1 id="PHP弱类型简介"><a href="#PHP弱类型简介" class="headerlink" title="PHP弱类型简介"></a>PHP弱类型简介</h1><p>在PHP中，可以进行一下的操作。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">$param = 1;</div><div class="line">$param = array();</div><div class="line">$param = &quot;stringg&quot;;</div></pre></td></tr></table></figure></p>
<p>弱类型的语言对变量的数据类型没有限制，你可以在任何地时候将变量赋值给任意的其他类型的变量，同时变量也可以转换成任意地其他类型的数据。</p>
<h1 id="类型转换问题"><a href="#类型转换问题" class="headerlink" title="类型转换问题"></a>类型转换问题</h1><p>类型转换是无法避免的问题。例如需要将GET或者是POST的参数转换为int类型，或者是两个变量不匹配的时候，PHP会自动地进行变量转换。但是PHP是一个弱类型的语言，导致在进行类型转换的时候会存在很多意想不到的问题。</p>
<p>比较操作符<br>类型转换<br>在$a==$b的比较中<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">$a=null;$b=flase ; //true</div><div class="line">$a=&apos;&apos;;$b=null; //true</div></pre></td></tr></table></figure></p>
<p>这样的例子还有很多，这种比较都是相等。<br>使用比较操作符的时候也存在类型转换的问题，如下：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">0==&apos;0&apos; //true</div><div class="line">0 == &apos;abcdefg&apos; //true</div><div class="line">0 === &apos;abcdefg&apos; //false</div><div class="line">1 == &apos;1abcdef&apos; //true</div></pre></td></tr></table></figure></p>
<p>当不同类型的变量进行比较的时候就会存在变量转换的问题，在转换之后就有可能会存在问题。</p>
<h1 id="Hash比较"><a href="#Hash比较" class="headerlink" title="Hash比较"></a>Hash比较</h1><p>除了以上的这种方式之外在进行hash比较的时候也会存在问题。如下：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&quot;0e132456789&quot;==&quot;0e7124511451155&quot; //true</div><div class="line">&quot;0e123456abc&quot;==&quot;0e1dddada&quot; //false</div><div class="line">&quot;0e1abc&quot;==&quot;0&quot;     //true</div></pre></td></tr></table></figure></p>
<p>在进行比较运算时，如果遇到了0e\d+这种字符串，就会将这种字符串解析为科学计数法。所以上面例子中2个数的值都是0因而就相等了。如果不满足0e\d+这种模式就不会相等。这个题目在攻防平台中的md5 collision就有考到。</p>
<h1 id="十六进制转换"><a href="#十六进制转换" class="headerlink" title="十六进制转换"></a>十六进制转换</h1><p>还存在一种十六进制余字符串进行比较运算时的问题。例子如下：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&quot;0x1e240&quot;==&quot;123456&quot; //true</div><div class="line">&quot;0x1e240&quot;==123456 //true</div><div class="line">&quot;0x1e240&quot;==&quot;1e240&quot; //false</div></pre></td></tr></table></figure></p>
<p>当其中的一个字符串是0x开头的时候，PHP会将此字符串解析成为十进制然后再进行比较，0×1240解析成为十进制就是123456，所以与int类型和string类型的123456比较都是相等。攻防平台中的起名字真难就是考察的这个特性。</p>
<h1 id="类型转换"><a href="#类型转换" class="headerlink" title="类型转换"></a>类型转换</h1><p>常见的转换主要就是int转换为string，string转换为int。</p>
<p>int转string：<br><code>$var = 5;</code><br>方式1：$item = (string)$var;</p>
<p>方式2：$item = strval($var);</p>
<p>string转int：intval()函数。</p>
<p>对于这个函数，可以先看2个例子。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">var_dump(intval(&apos;2&apos;)) //2</div><div class="line">var_dump(intval(&apos;3abcd&apos;)) //3</div><div class="line">var_dump(intval(&apos;abcd&apos;)) //0</div></pre></td></tr></table></figure></p>
<p>说明intval()转换的时候，会将从字符串的开始进行转换知道遇到一个非数字的字符。即使出现无法转换的字符串，intval()不会报错而是返回0。<br>intval()的这种特性在攻防平台中的MYSQL这道题目中就有考到。<br>同时，程序员在编程的时候也不应该使用如下的这段代码：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">if(intval($a)&gt;1000) &#123;</div><div class="line">    mysql_query(&quot;select * from news where id=&quot;.$a)</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>这个时候$a的值有可能是1002 union…..</p>
<h1 id="内置函数的参数的松散性"><a href="#内置函数的参数的松散性" class="headerlink" title="内置函数的参数的松散性"></a>内置函数的参数的松散性</h1><p>内置函数的松散性说的是，调用函数时给函数传递函数无法接受的参数类型。解释起来有点拗口，还是直接通过实际的例子来说明问题，下面会重点介绍几个这种函数。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">md5()</div><div class="line">$array1[] = array(</div><div class="line">    &quot;foo&quot; =&gt; &quot;bar&quot;,</div><div class="line">    &quot;bar&quot; =&gt; &quot;foo&quot;,</div><div class="line">);</div><div class="line">$array2 = array(&quot;foo&quot;, &quot;bar&quot;, &quot;hello&quot;, &quot;world&quot;);</div><div class="line">var_dump(md5($array1)==var_dump($array2)); //true</div></pre></td></tr></table></figure></p>
<p>PHP手册中的md5()函数的描述是string md5 ( string $str [, bool $raw_output = false ] )，md5()中的需要是一个string类型的参数。但是当你传递一个array时，md5()不会报错，知识会无法正确地求出array的md5值，这样就会导致任意2个array的md5值都会相等。这个md5()的特性在攻防平台中的bypass again同样有考到。</p>
<p>strcmp()</p>
<p>strcmp()函数在PHP官方手册中的描述是int strcmp ( string $str1 , string $str2 ),需要给strcmp()传递2个string类型的参数。如果str1小于str2,返回-1，相等返回0，否则返回1。strcmp函数比较字符串的本质是将两个变量转换为ascii，然后进行减法运算，然后根据运算结果来决定返回值。</p>
<p>如果传入给出strcmp()的参数是数字呢？<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">$array=[1,2,3];</div><div class="line">var_dump(strcmp($array,&apos;123&apos;)); //null,在某种意义上null也就是相当于false。</div></pre></td></tr></table></figure></p>
<p>strcmp这种特性在攻防平台中的pass check有考到。</p>
<p>switch()</p>
<p>如果switch是数字类型的case的判断时，switch会将其中的参数转换为int类型。如下：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">$i =&quot;2abc&quot;;</div><div class="line">switch ($i) &#123;</div><div class="line">case 0:</div><div class="line">case 1:</div><div class="line">case 2:</div><div class="line">    echo &quot;i is less than 3 but not negative&quot;;</div><div class="line">    break;</div><div class="line">case 3:</div><div class="line">    echo &quot;i is 3&quot;;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>这个时候程序输出的是i is less than 3 but not negative，是由于switch()函数将$i进行了类型转换，转换结果为2。</p>
<p>in_array()</p>
<p>在PHP手册中，in_array()函数的解释是bool in_array ( mixed $needle , array $haystack [, bool $strict = FALSE ] ),如果strict参数没有提供，那么in_array就会使用松散比较来判断$needle是否在$haystack中。当strince的值为true时，in_array()会比较needls的类型和haystack中的类型是否相同。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">$array=[0,1,2,&apos;3&apos;];</div><div class="line">var_dump(in_array(&apos;abc&apos;, $array));  //true</div><div class="line">var_dump(in_array(&apos;1bc&apos;, $array)); //true</div></pre></td></tr></table></figure></p>
<p>可以看到上面的情况返回的都是true,因为’abc’会转换为0，’1bc’转换为1。<br>array_search()与in_array()也是一样的问题。</p>

          
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
  </section>

  
  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/page/10/"><i class="fa fa-angle-left"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/10/">10</a><span class="page-number current">11</span><a class="page-number" href="/page/12/">12</a><span class="space">&hellip;</span><a class="page-number" href="/page/14/">14</a><a class="extend next" rel="next" href="/page/12/"><i class="fa fa-angle-right"></i></a>
  </nav>



          </div>
          


          

        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      

      <section class="site-overview sidebar-panel  sidebar-panel-active ">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/images/avatar.png"
               alt="uiste" />
          <p class="site-author-name" itemprop="name">uiste</p>
          <p class="site-description motion-element" itemprop="description">Stay Hungry，Stay Foolish</p>
        </div>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">70</span>
              <span class="site-state-item-name">日志</span>
            </a>
          </div>

          
            <div class="site-state-item site-state-categories">
              
                <span class="site-state-item-count">13</span>
                <span class="site-state-item-name">分类</span>
              
            </div>
          

          
            <div class="site-state-item site-state-tags">
              <a href="/tags">
                <span class="site-state-item-count">55</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        
          <div class="feed-link motion-element">
            <a href="/atom.xml" rel="alternate">
              <i class="fa fa-rss"></i>
              RSS
            </a>
          </div>
        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/uiste" target="_blank" rel="external nofollow" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://weibo.com/uiste" target="_blank" rel="external nofollow" title="微博">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  微博
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="http://www.zhihu.com/people/uiste" target="_blank" rel="external nofollow" title="知乎">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  知乎
                </a>
              </span>
            
          
        </div>

        
        

        
        
          <div class="links-of-blogroll motion-element links-of-blogroll-inline">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-globe"></i>
              友情链接
            </div>
            <ul class="links-of-blogroll-list">
              
                <li class="links-of-blogroll-item">
                  <a href="http://www.uiste.com" title="uiste 个人博客" target="_blank">uiste 个人博客</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a href="http://uiste.github.io" title="uiste 技术博客" target="_blank">uiste 技术博客</a>
                </li>
              
            </ul>
          </div>
        

      </section>

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy;  2015 - 
  <span itemprop="copyrightYear">2016</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">uiste</span>
</div>

<div class="powered-by">
  由 <a class="theme-link" href="http://hexo.io" rel="external nofollow">Hexo</a> 趋势动力
</div>
<!--站长统计-->
<script src="https://s95.cnzz.com/z_stat.php?id=1259894121&web_id=1259894121" language="JavaScript"></script>
<!--<div class="theme-info">
  Theme -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow">
    NexT.Mist
  </a>
</div> -->
&nbsp;&nbsp;&nbsp;本站总点击 <span id="busuanzi_value_site_pv"></span> 次
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;您是第 <span id="busuanzi_value_site_uv"></span> 位访客

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

<script>
(function(){
    var bp = document.createElement('script');
    bp.src = '//push.zhanzhang.baidu.com/push.js';
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>


        

        
      </div>
    </footer>

    <div class="back-to-top">
      <i class="fa fa-arrow-up"></i>
    </div>
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  



  
  <script type="text/javascript" src="/vendors/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/vendors/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/vendors/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/vendors/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/vendors/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/vendors/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.0.1"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.0.1"></script>



  
  

  

  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.1"></script>



  

  
    
  

  <script type="text/javascript">
    var duoshuoQuery = {short_name:"uiste"};
    (function() {
      var ds = document.createElement('script');
      ds.type = 'text/javascript';ds.async = true;
      ds.id = 'duoshuo-script';
      ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
      ds.charset = 'UTF-8';
      (document.getElementsByTagName('head')[0]
      || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
  </script>

  
    
    <script src="/vendors/ua-parser-js/dist/ua-parser.min.js?v=0.7.9"></script>
    <script src="/js/src/hook-duoshuo.js"></script>
  






  
  
  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length == 0) {
       search_path = "search.xml";
    }
    var path = "/" + search_path;
    // monitor main search box;

    function proceedsearch() {
      $("body").append('<div class="popoverlay">').css('overflow', 'hidden');
      $('.popup').toggle();

    }
    // search function;
    var searchFunc = function(path, search_id, content_id) {
    'use strict';
    $.ajax({
        url: path,
        dataType: "xml",
        async: true,
        success: function( xmlResponse ) {
            // get the contents from search data
            isfetched = true;
            $('.popup').detach().appendTo('.header-inner');
            var datas = $( "entry", xmlResponse ).map(function() {
                return {
                    title: $( "title", this ).text(),
                    content: $("content",this).text(),
                    url: $( "url" , this).text()
                };
            }).get();
            var $input = document.getElementById(search_id);
            var $resultContent = document.getElementById(content_id);
            $input.addEventListener('input', function(){
                var matchcounts = 0;
                var str='<ul class=\"search-result-list\">';
                var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                $resultContent.innerHTML = "";
                if (this.value.trim().length > 1) {
                // perform local searching
                datas.forEach(function(data) {
                    var isMatch = true;
                    var content_index = [];
                    var data_title = data.title.trim().toLowerCase();
                    var data_content = data.content.trim().replace(/<[^>]+>/g,"").toLowerCase();
                    var data_url = data.url;
                    var index_title = -1;
                    var index_content = -1;
                    var first_occur = -1;
                    // only match artiles with not empty titles and contents
                    if(data_title != '' && data_content != '') {
                        keywords.forEach(function(keyword, i) {
                            index_title = data_title.indexOf(keyword);
                            index_content = data_content.indexOf(keyword);
                            if( index_title < 0 && index_content < 0 ){
                                isMatch = false;
                            } else {
                                if (index_content < 0) {
                                    index_content = 0;
                                }
                                if (i == 0) {
                                    first_occur = index_content;
                                }
                            }
                        });
                    }
                    // show search results
                    if (isMatch) {
                        matchcounts += 1;
                        str += "<li><a href='"+ data_url +"' class='search-result-title'>"+ data_title +"</a>";
                        var content = data.content.trim().replace(/<[^>]+>/g,"");
                        if (first_occur >= 0) {
                            // cut out 100 characters
                            var start = first_occur - 20;
                            var end = first_occur + 80;
                            if(start < 0){
                                start = 0;
                            }
                            if(start == 0){
                                end = 50;
                            }
                            if(end > content.length){
                                end = content.length;
                            }
                            var match_content = content.substring(start, end);
                            // highlight all keywords
                            keywords.forEach(function(keyword){
                                var regS = new RegExp(keyword, "gi");
                                match_content = match_content.replace(regS, "<b class=\"search-keyword\">"+keyword+"</b>");
                            });

                            str += "<p class=\"search-result\">" + match_content +"...</p>"
                        }
                        str += "</li>";
                    }
                })};
                str += "</ul>";
                if (matchcounts == 0) { str = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>' }
                if (keywords == "") { str = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>' }
                $resultContent.innerHTML = str;
            });
            proceedsearch();
        }
    });}

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched == false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };

    });

    $('.popup-btn-close').click(function(e){
      $('.popup').hide();
      $(".popoverlay").remove();
      $('body').css('overflow', '');
    });
    $('.popup').click(function(e){
      e.stopPropagation();
    });
  </script>


  

  

  

</body>
</html>
